<template>
	<view>
		<view class="container">
			
			<uni-nav-bar title="购物车"  fixed="true" color="#353535" backgroundColor="#fff"></uni-nav-bar>
			<view class="service-policy">
				<!-- <view class="item">30天无忧退货</view>
				<view class="item">48小时快速退款</view>
				<view class="item">满88元免邮费</view> -->
				<view class="l"> 您的购物车内共有{{cartItems.length}}款商品</view>
				<view class="txt r" @tap="editCart"> {{!isEditCart ? '管理' : '完成'}}</view>
				<!-- <view class="r" bindtap="editCart"> {{!isEditCart ? '管理' : '完成'}}</view> -->
			</view>
			
			<view class="no-cart" v-if="cartItems.length <= 0 && littleItems.length <= 0 && lineitems.length <= 0">
				<view class="c">
					<image src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png"></image>
					<text>去添加点什么吧</text>
				</view>
			</view>
			<view class="cart-view">
				<view class="list"  v-if="cartItems.length > 0">
					<view class="group-item">
						<!-- <view class="item {{isEditCart ? 'edit' : ''}}" wx:for="{{cartItems}}" wx:key="{{item.id}}"> -->
						<view class="title">
							<!-- <view class="checkbox {{item.isChecked ? 'checked' : ''}}" bindtap="checkedItem" data-item-index="{{checkAll}}"></view> -->
							<view class="checkbox" @tap="checkedAll">
								<image src="/static/static/images/check.png" v-if="!checkedAllStatus" style="height: 28rpx; width:28rpx"></image>
								<image src="/static/static/images/checked.png" v-if="checkedAllStatus" style="height: 28rpx; width:28rpx"></image>
							</view>
							<view class="txt">琅琊严选</view>
							<view class="txt m">领券</view>
							<!-- <view class="txt r" bindtap="editCart"> {{!isEditCart ? '管理' : '完成'}}</view> -->
						</view>
						<view class="goods">
							<view v-for="(item, index) in cartItems" :key="index" class="item">
								<movable-area>
									<movable-view out-of-bounds="true" direction="horizontal" :x="item.xmove" 
									 :data-cartIndex="index" @touchstart="handleTouchStart" @touchend="handleTouchEnd"  @change="handleMovableChange">
										<view class="l">
											<view class="checkbox">
												<image src="/static/static/images/check.png" v-if="!item.isChecked" style="height: 28rpx; width:28rpx" @tap.stop="checkedItem"
												 :data-item-index="index"></image>
												<image src="/static/static/images/checked.png" v-if="item.isChecked" style="height: 28rpx; width:28rpx"
												 @tap.stop="checkedItem" :data-item-index="index"></image>
											</view>
											<!-- <view class="checkbox {{item.isChecked ? 'checked' : ''}}" bindtap="checkedItem" data-item-index="{{index}}"></view> -->
											<navigator class="cart-goods" :url="'/pages/goods/goods?id=' + item.productId">
												<image class="img" :src="item.productPic"></image>
												<view class="info">
													<view class="t">
														<text class="name">{{item.productName}}</text>
														<!-- <text class="num">x{{item.quantity}}</text> -->
													</view>
													<view class="attr" @tap.stop="choiceAttr"  :data-productid="item.productId">
														<text class="attr-text">{{item.sku.sku}}</text>
														<image class="attr-img" src="/static/static/images/arrow_down.png"></image>
													</view>
													<view class="b">
														<text class="price">￥{{item.price}}</text>
														<view class="selnum">
															<view :class="'cut ' + (item.quantity > 1 ? '' : 'noChange')" @tap.stop="cutNumber" :data-item-index="index">-</view>
															<input :value="item.quantity" class="number" disabled="true" type="number"></input>
															<view class="add" @tap.stop="addNumber" :data-item-index="index">+</view>
														</view>
													</view>
												</view>

											</navigator>
										</view>
									</movable-view>
								</movable-area>

								<view class="doing">
									<!-- <view class="similar" >找相似</view> -->
									<view class="collect" @tap="slidercollect" :data-productid="item.productId" :data-id="item.id">
										<!-- 移入收藏夹 -->
										<text>移入</text>
										<text style="font-size:28rpx">收藏夹</text>
									</view>
									<view class="delete" @tap="sliderdelete" :data-id="item.id">删除</view>
								</view>

							</view>
						</view>
					</view>
					
				</view>
				<view class="lowstock" v-if="littleItems.length> 0">
					<view class="title">
						<view class="checkbox">
							<view style="height: 28rpx; width:28rpx;background:#bcbcbc;border-radius:14rpx;"></view>
						</view>
						<view class="txt">琅琊严选</view>
						<view class="txt m">领券</view>
					</view>
					<view class="goods">
						<view v-for="(item, index) in littleItems" :key="index" class="item">
							<movable-area>
								<movable-view out-of-bounds="true" direction="horizontal" :x="item.xmove" 
								 :data-littleIndex="index" @touchstart="handleTouchStart" @touchend="handleTouchEnd"  @change="handleMovableChange">
									<view class="l">
										<view class="checkbox">
											<view style="height: 28rpx; width:28rpx;background:#bcbcbc;border-radius:14rpx;"></view>
										</view>						
										<navigator class="cart-goods" :url="'/pages/goods/goods?id=' + item.productId">
											<image class="img" :src="item.productPic"></image>
											<view class="info">
												<view class="t">
													<text class="name">{{item.productName}}</text>
												</view>
												<view class="attr">
													<text class="attr-text">库存紧张</text>
												</view>
												<view class="b">
													<text class="price" style="color: #353535;font-size:24rpx;">请重新选择商品规格</text>
													
													<view class="choice" @tap.stop="choiceAttr" :data-productid="item.productId">重选</view> 
												</view>
											</view>
										</navigator>
									</view>
								</movable-view>
							</movable-area>
							<view class="doing">
								<!-- <view class="similar" >找相似</view> -->
								<view class="collect" @tap="slidercollect" :data-productid="item.productId" :data-id="item.id">
									<text>移入</text>
									<text style="font-size:28rpx">收藏夹</text>
								</view>
								<view class="delete" @tap="sliderdelete" :data-id="item.id">删除</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lineitems" v-if="lineitems.length> 0">
						<view class="title2">
							<view class="txt">失效商品{{lineitems.length}}件</view>
							<view class="txt">
								<view class="m" @tap.stop="collecoffline">移入收藏夹</view>
								<view class="m" style="margin-left:30rpx;" @tap.stop="deleteoffline">清空失效宝贝</view>
							</view>
						</view>
						<view class="goods">
							<view v-for="(item, index) in lineitems" :key="index" class="item">
								<movable-area>
									<movable-view out-of-bounds="true" direction="horizontal" :x="item.xmove" 
									 :data-offIndex="index" @touchstart="handleTouchStart" @touchend="handleTouchEnd"  @change="handleMovableChange">
										<view class="l">
											<view class="checkbox">
												<view style="height: 28rpx; width:28rpx;background:#bcbcbc;border-radius:14rpx;"></view>
											</view>						
											<navigator class="cart-goods" :url="'/pages/goods/goods?id=' + item.productId">
												<image class="img" :src="item.productPic"></image>
												<view class="darkimg">已失效</view>
												<view class="info">
													<view class="t">
														<text class="name">{{item.productName}}</text>
													</view>
													<view class="b">
														<text class="price"  style="color: #353535;font-size:24rpx;">商品已失效</text>
														<view class="choice" @tap.stop="similaroffline" style="width:">找相似</view> 
													</view>
												</view>
											</navigator>
										</view>
									</movable-view>
								</movable-area>
								<view class="doing">
										<!-- <view class="similar" >找相似</view> -->
									<view class="collect" @tap="slidercollect" :data-productid="item.productId" :data-id="item.id">
										<text>移入</text>
										<text style="font-size:28rpx">收藏夹</text>
									</view>
									<view class="delete" @tap="sliderdelete" :data-id="item.id">删除</view>
								</view>
							</view>
						</view>
				</view>	
			</view>
		</view>
				<!--<view class="group-item">
                <view class="header">
                    <view class="promotion">
                        <text class="tag">满赠</text>
                        <text class="txt">再加26元, 3件赠1件蔓越莓干</text>
                        <image class="icon" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/go-b67cb9718d.png"></image>
                    </view>
                    <view class="get">领赠品</view>                
                </view>
                <view class="goods">
                    <view class="item">
                        <view class="checkbox" ></view>
                        <view class="cart-goods">
                            <image class="img" src="http://yanxuan.nosdn.127.net/04e05e9de3a471b1f6479dd137b459a8.png"></image>
                            <view class="info">
                                <view class="t">
                                    <text class="name">秋冬保暖加厚细羊毛被</text>
                                    <text class="num">x1</text>
                                </view>
                                <view class="attr">220*240cm</view>
                                <view class="b">
                                    <text class="price">￥199.99</text>
                                    <view class="open">优惠活动</view>
                                </view>
                            </view>
                        </view>
                    </view>
				</view>
            </view>-->
	

				<view class="cart-bottom">
					<view class="checkbox" @tap="checkedAll">
						
						<image src="/static/static/images/check.png" v-if="!checkedAllStatus" style="height: 28rpx; width:28rpx;margin-top:31rpx;margin-right: 16rpx;"></image>
					
						<view v-if="!checkedAllStatus" style="font-size:24rpx; float:left">选中({{cartclass}})</view>
						<view >
							<image src="/static/static/images/checked.png" v-if="checkedAllStatus" style="height: 28rpx; line-height:32rpx; width:28rpx;margin-right: 16rpx;"></image>
						</view>
						<view v-if="checkedAllStatus" style="font-size:24rpx; float:left">全选({{cartclass}})</view>
					</view>
					<view class="total" v-if="!isEditCart">
						<view class="l">
							合计：
						</view>
						<view class="r">
							￥{{cartTotal.checkedAmount}}
						</view>
					</view>
					<view class="total-move" @tap.stop="movetocollect" v-if="isEditCart">移入收藏夹</view>
					<!-- <view class="delete" bindtap="editCart">{{!isEditCart ? '编辑' : '完成'}}</view> -->
					<view class="checkout-delete" @tap="deleteCart" v-if="isEditCart">删除所选</view>
					<view class="checkout" @tap="checkoutOrder" v-if="!isEditCart">结算</view>
					<view>
					</view>
				</view>
				<view style="height:90rpx;width:100%;background:#f1f1f1;"></view>
				<login :show="showLoginDialog" @success="onLigonSuccess"> </login>
	</view>
</template>

<script>
	var util = require("../../utils/util.js");
	var api = require("../../config/api.js");
	var app = getApp();
	import login from "../component/login/login";
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	// import slideDelete from "../component/slide-delete/index";
	const device = uni.getSystemInfoSync();
	const xs = device.windowWidth / 750;

	export default {
		data() {
			return {
				cartItems: [],
				littleItems:[],
				lineitems:[],
				cartTotal: {
					"count": 0,
					"amount": 0.00,
					"checkedCount": 0,
					"checkedAmount": 0.00
				},
				cartclass:0,
				isEditCart: false,
				checkedAllStatus: true,
				editCartList: [],
				showLoginDialog: false,
				checkAll: -1,
				delBtnW: 188 * xs,
				xmove: 94,
				old:{
					xmove: 0
				}
			};
		},

		components: {
			login,
			uniNavBar
		},
		props: {},
		onShareAppMessage: function(res) {
			return {
				title: '琅琊严选',
				path: '/pages/index/index'
			};
		},
		onLoad: function(options) {
			console.log("==onload==")
			// 页面初始化 options为页面跳转所带来的参数
			uni.setNavigationBarTitle({
				title: '购物车'
			}); // wx.setNavigationBarColor({
			//   frontColor: '#353535', // 必写项
			//   backgroundColor: '#ffffff', // 传递的颜色值
			//   animation: { // 可选项
			//     duration: 4000,
			//     timingFunc: 'easeIn'
			//   }
			// });
			
		},
		onShow: function() {
			console.log("==onShow==")
			// 页面显示
			this.setData({
				isEditCart: false
			});
			this.getCartList();
			// this.cartclass = this.getCheckedCount();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			this.getCartList(); //模拟加载

			setTimeout(function() {
				// complete
				uni.hideNavigationBarLoading(); //完成停止加载

				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		methods: {
			getCartList: function() {
				let that = this;
				util.request(api.CartList).then(function(res) {
					if (res.errno == 0 &&  res.data.cartItems) {
						let items =  res.data.cartItems;
						that.showLoginDialog= false;
						that.cartItems =items.filter(function(item){
							if(item.sku.stock > item.sku.lowStock){
								return item
							}
						});
						that.littleItems = items.filter(function(item){
							if(item.sku.stock <= item.sku.lowStock){
								item.isChecked = 0
								return item;
							}
						});
						// console.log("littleItems")
						 // console.log(JSON.stringify(that.littleItems))
						that.setData({
							// cartItems: res.data.cartItems,
							cartTotal: res.data.cartTotal,
							lineitems: res.data.offlineItems
						});
						that.cartclass = that.getCheckedCount();
					} else if (res.status == 500) {
						that.setData({
							cartItems: [],
							littleItems: [],
							lineitems: [],
							cartTotal: {}
						 });
						that.showLogin();
						that.cartTotal.checkedAmount = 0.00;
					}
					that.setData({
						checkedAllStatus: that.isCheckedAll()
					}); // var temp = that.data.cartItems;
					// temp.forEach(element => {
					//   element.isTouchMove = 0
					// });
					// that.setData({
					//   cartItems: temp
					// });
				});
			},
			deleteoffline:function(){
				
				let ids = [];
				console.log(this.lineitems[0].id)
				for(let i=0; i<this.lineitems.length; i++){
					ids.push(this.lineitems[i].id);
					console.log(this.lineitems[i].id)
					console.log(ids)
				}
				let that = this;
				util.request(api.CartDelete, {
					ids: ids
				}, 'POST').then(function(res) {
					if (res.errno == 0) {
						console.log("delete res" + JSON.stringify(res));
						that.setData({
							cartItems: res.data.cartItems,
							cartTotal: res.data.cartTotal
						});
					}
				
					that.getCartList();
				});
				
			},
			collecoffline:function(){
				let ids = [];
				// console.log(this.lineitems[0].productId);
				// console.log(this.lineitems.length);
				for(let i=0; i<this.lineitems.length; i++){
					ids.push(this.lineitems[i].productId);
					console.log(this.lineitems[i].productId)
					console.log(ids)
				}
				let that = this;
				util.request(api.CollectReCollect, {
					ids: ids
				}, "POST").then(function(res) {
					// console.log(JSON.stringify(res));
					if (res.errno == 0) {
						// console.log(res);
						that.deleteoffline();
					} else {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: res.errmsg,
							mask: true
						});
					}
				});
				
			},
			isCheckedAll: function() {
				//判断购物车商品已全选
				let that = this;

				for (let index = 0; index < that.cartItems.length; index++) {
					const element = that.cartItems[index];

					if (element.isChecked == 0) {
						return false;
					}
				}

				return true;
			},
			showLogin: function() {
				this.setData({
					showLoginDialog: true
				});
			},
			checkedItem: function(event) {
				console.log("checkedItem==" + JSON.stringify(event));
				let itemIndex = event.target.dataset.itemIndex;
				let that = this; // if (!this.data.isEditCart) {

				let ids = [];
				let isChecked = 0;

				if (itemIndex == -1) {
					isChecked = 0;
					that.setData({
						checkAll: -2
					});
				}

				if (itemIndex == -2) {
					isChecked = 1;
					that.setData({
						checkAll: -1
					});
				} else {
					ids.push(that.cartItems[itemIndex].id);
					isChecked = that.cartItems[itemIndex].isChecked ? 0 : 1;
				}

				util.request(api.CartChecked, {
					ids: ids,
					isChecked: isChecked
				}, 'POST').then(function(res) {
					if (res.errno == 0) {
						console.log(res.data);
						let items =  res.data.cartItems;
						that.cartItems =items.filter(function(item){
							if(item.sku.stock > item.sku.lowStock){
								return item
							}
						});
						that.littleItems = items.filter(function(item){
							if(item.sku.stock <= item.sku.lowStock){
								return item
							}
						});
						that.setData({
							cartTotal: res.data.cartTotal,
							lineitems: res.data.offlineItems
							
						});
					}	
					console.log("==checkedItem==")
					that.cartclass = that.getCheckedCount();
					that.setData({
						checkedAllStatus: that.isCheckedAll()
					});
				}); // } else {
				//   //编辑状态
				//   let tmpCartData = this.data.cartItems.map(function (element, index, array) {
				//     if (index == itemIndex){
				//       element.isChecked = !element.isChecked;
				//     }
				//     return element;
				//   });
				//   console.log("tmpCartData "+JSON.stringify(tmpCartData))
				//   that.setData({
				//     cartItems: tmpCartData,
				//     checkedAllStatus: that.isCheckedAll(),
				//     'cartTotal.checkedCount': that.getCheckedCount()
				//   });
				// }
			},
			getCheckedCount: function() {
				console.log("==getCheckedCount==")
				let cartclass = 0;
				this.cartItems.forEach(function(v) {
					if (v.isChecked == true) {
						// checkedCount += v.quantity;
						cartclass ++;
					}
				});
				// console.log(checkedCount);
				return cartclass;
			},
			checkedAll: function() {
				let that = this; // if (!this.data.isEditCart) {

				var ids = this.cartItems.map(function(v) {
					return v.id;
				});
				util.request(api.CartChecked, {
					ids: ids,
					isChecked: that.isCheckedAll() ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.errno == 0) {
						console.log(res.data);
						let items =  res.data.cartItems;
						that.cartItems =items.filter(function(item){
							if(item.sku.stock > item.sku.lowStock){
								return item
							}
						});
						that.littleItems = items.filter(function(item){
							if(item.sku.stock <= item.sku.lowStock){
								return item
							}
						});
						that.cartTotal = res.data.cartTotal;
						that.lineitems = res.data.offlineItems;
					}

					that.setData({
						checkedAllStatus: that.isCheckedAll()
					});
					that.cartclass = that.getCheckedCount();
				}); // } else {
				//   //编辑状态
				//   let checkedAllStatus = that.isCheckedAll();
				//   let tmpCartData = this.data.cartItems.map(function (v) {
				//     v.checked = !checkedAllStatus;
				//     return v;
				//   });
				//   that.setData({
				//     cartItems: tmpCartData,
				//     checkedAllStatus: that.isCheckedAll(),
				//     'cartTotal.checkedCount': that.getCheckedCount()
				//   });
				// }
			},
			editCart: function() {
				// var that = this;
				console.log(this.isEditCart); // if (this.data.isEditCart) {

				this.getCartList();
				this.setData({
					isEditCart: !this.isEditCart
				}); // } else {
				//   //编辑状态
				//   let tmpCartList = this.data.cartItems.map(function (v) {
				//     v.isChecked = false;
				//     return v;
				//   });
				//   this.setData({
				//     editCartList: this.data.cartItems,
				//     cartItems: tmpCartList,
				//     isEditCart: !this.data.isEditCart,
				//     checkedAllStatus: that.isCheckedAll(),
				//     'cartTotal.checkedCount': that.getCheckedCount()
				//   });
				// }
			},
			updateCart: function(id, quantity) {
				let that = this;
				util.request(api.CartUpdate, {
					id: id,
					quantity: quantity
				}, 'POST').then(function(res) {
					if (res.errno == 0 &&res.data.cartItems) {
						console.log(res.data);
						let items =  res.data.cartItems;
						that.cartItems =items.filter(function(item){
							if(item.sku.stock > item.sku.lowStock){
								return item
							}
						});
						that.littleItems = items.filter(function(item){
							if(item.sku.stock <= item.sku.lowStock){
								return item
							}
						});
						that.setData({
							cartTotal: res.data.cartTotal,
							lineitems: res.data.offlineItems
						});
					}

					that.setData({
						checkedAllStatus: that.isCheckedAll()
					});
				});
			},
			cutNumber: function(event) {
				let itemIndex = event.target.dataset.itemIndex;
				let cartItem = this.cartItems[itemIndex];
				let quantity = cartItem.quantity - 1 > 1 ? cartItem.quantity - 1 : 1;
				cartItem.quantity = quantity;
				this.setData({
					cartItems: this.cartItems
				});
				this.updateCart(cartItem.id, quantity);
			},
			addNumber: function(event) {
				let itemIndex = event.target.dataset.itemIndex;
				let cartItem = this.cartItems[itemIndex];
				let quantity = cartItem.quantity + 1;
				cartItem.quantity = quantity;
				this.setData({
					cartItems: this.cartItems
				});
				this.updateCart(cartItem.id, quantity);
			},
			checkoutOrder: function() {
				//获取已选择的商品
				var checkedGoods = this.cartItems.filter(function(element, index, array) {
					if (element.isChecked == true) {
						return true;
					} else {
						return false;
					}
				});

				if (checkedGoods.length <= 0) {
					return false;
				}

				uni.navigateTo({
					url: '../shopping/checkout/checkout'
				});
			},
			//左滑移入收藏夹
			slidercollect:function(event) {
				let productId = [event.currentTarget.dataset.productid];
				console.log(JSON.stringify(event));
				console.log(productId);
				if (productId) {
					util.request(api.CollectReCollect, {
						ids: productId
					}, "POST").then(function(res) {
						console.log(JSON.stringify(res));
						if (res.errno == 0) {
							console.log(res);
						} else {
							uni.showToast({
								image: "/static/static/images/icon_error.png",
								title: res.errmsg,
								mask: true
							});
						}
					});
					this.sliderdelete(event); // this.getCartList();  
				}
			},
			//试一试左滑删除
			showDeleteButton: function(e){
			
				console.log("show")
				let delBtnW = '-'+this.delBtnW;
				// this.xmove = delBtnW;
				if(e.currentTarget.dataset.cartindex ==0 || e.currentTarget.dataset.cartindex){
					console.log("show++")
					let cartIndex= e.currentTarget.dataset.cartindex;
					let cartItems = this.cartItems;
					this.old.xmove = cartItems[cartIndex].xmove
					cartItems[cartIndex].xmove = delBtnW;
					this.setData({
					    	cartItems: cartItems
					});
					console.log("show1--"+this.cartItems[cartIndex].xmove);
				}else if(e.currentTarget.dataset.littleindex ==0 || e.currentTarget.dataset.littleindex){
					let cartIndex= e.currentTarget.dataset.littleindex;
					let littleItems = this.littleItems;
					this.old.xmove = littleItems[cartIndex].xmove
					littleItems[cartIndex].xmove = delBtnW;
					this.setData({
					    littleItems: littleItems
					});
					console.log("show2--"+this.littleItems[cartIndex].xmove);
				}else if(e.currentTarget.dataset.offindex ==0 || e.currentTarget.dataset.offindex){
					let cartIndex= e.currentTarget.dataset.offindex;
					let lineitems = this.lineitems;
					this.old.xmove = lineitems[cartIndex].xmove
					lineitems[cartIndex].xmove = delBtnW;
					this.setData({
					    lineitems: lineitems
					});
					console.log("show3--"+this.lineitems[cartIndex].xmove);
				}
				// let cartIndex= e.currentTarget.dataset.cartindex;
				// this.setXmove(cartIndex, delBtnW);
				// console.log("show"+cartIndex)
			},
			hideDeleteButton: function (e) {
				console.log("hide")
				
				if(e.currentTarget.dataset.cartindex ==0 || e.currentTarget.dataset.cartindex){
					let cartIndex= e.currentTarget.dataset.cartindex;
					let cartItems = this.cartItems;
					this.old.xmove = cartItems[cartIndex].xmove
					cartItems[cartIndex].xmove = 0
					this.setData({
					    cartItems: cartItems
					});
					console.log("hide1--"+this.cartItems[cartIndex].xmove);
				}else if(e.currentTarget.dataset.littleindex ==0 || e.currentTarget.dataset.littleindex){
					let cartIndex= e.currentTarget.dataset.littleindex;
					let littleItems = this.littleItems;
					this.old.xmove = littleItems[cartIndex].xmove
					littleItems[cartIndex].xmove = 0;
					this.setData({
					    littleItems: littleItems
					});
					console.log("hide2--"+this.littleItems[cartIndex].xmove);
				}else if(e.currentTarget.dataset.offindex ==0 || e.currentTarget.dataset.offindex){
					let cartIndex= e.currentTarget.dataset.offindex;
					let lineitems = this.lineitems;
					this.old.xmove = lineitems[cartIndex].xmove
					lineitems[cartIndex].xmove = 0;
					this.setData({
					    lineitems: lineitems
					});
					console.log("hide3--"+this.lineitems[cartIndex].xmove);
				}
				
			  },
			handleMovableChange: function (e) {
				console.log("change")
				let delW = '-'+this.delBtnW/4;
			    if (e.detail.source === 'friction') {
			      if (e.detail.x < delW) {
			        this.showDeleteButton(e)
			      } else {
			        this.hideDeleteButton(e)
			      }
			    } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
			      this.hideDeleteButton(e)
			    }
			},
			handleTouchStart(e) {
				console.log("start")
			    this.startX = e.touches[0].pageX
			},
			handleTouchEnd(e) {
				console.log("end");
				
				let delW =  '-'+this.delBtnW/4;
				let gow = this.delBtnW/4;
			    if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= delW) {
			        this.showDeleteButton(e)
			    } else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < gow) {
			        this.showDeleteButton(e)
			    } else {
			        this.hideDeleteButton(e)
			    }
			},
			//左滑删除
			sliderdelete: function(event) {
				let that = this;
				console.log("==>" + JSON.stringify(event));
				let productId = [event.currentTarget.dataset.id];
				util.request(api.CartDelete, {
					ids: productId
				}, 'POST').then(function(res) {
					if (res.errno == 0 &&res.data.cartItems) {
						console.log(res.data);
						let items =  res.data.cartItems;
						that.cartItems =items.filter(function(item){
							if(item.sku.stock > item.sku.lowStock){
								return item
							}
						});
						that.littleItems = items.filter(function(item){
							if(item.sku.stock <= item.sku.lowStock){
								return item
							}
						});
						that.setData({
							cartTotal: res.data.cartTotal,
							lineitems: res.data.offlineItems
						});
					}else if(res.errno == 0 && !res.data.cartItems){
						that.cartItems =[];
						that.littleItems = [];
						that.lineitems = [];
					}
					
					that.setData({
						checkedAllStatus: that.isCheckedAll()
					});
					// that.getCartList();
				});
			},

			movetocollect: function(e) {
				//移入收藏夹
				var checkedGoods = this.cartItems.filter(function(element, index, array) {
					if (element.isChecked == true) {
						return true;
					} else {
						return false;
					}
				});

				if (checkedGoods.length <= 0) {
					return false;
				}

				let checkIds = checkedGoods.map(item => item.productId);
				console.log(checkIds);
				util.request(api.CollectReCollect, {
					ids: checkIds
				}, "POST").then(function(res) {
					console.log(JSON.stringify(res));

					if (res.errno == 0) {
						that.setData({});
					} else {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: res.errmsg,
							mask: true
						});
					}
				});
				this.deleteCart();
				// this.getCartList();
			},

			deleteCart: function() {
				//获取已选择的商品
				let that = this;
				let productIds = this.cartItems.filter(function(element, index, array) {
					if (element.isChecked == true) {
						return true;
					} else {
						return false;
					}
				});
				console.log("delete start" + productIds);

				if (productIds.length <= 0) {
					return false;
				}

				productIds = productIds.map(function(element, index, array) {
					if (element.isChecked == 1) {
						return element.id;
					}
				});
				util.request(api.CartDelete, {
					ids: productIds
				}, 'POST').then(function(res) {
					if (res.errno == 0 &&res.data.cartItems) {
						console.log(res.data);
						let items =  res.data.cartItems;
						that.cartItems =items.filter(function(item){
							if(item.sku.stock > item.sku.lowStock){
								return item
							}
						});
						that.littleItems = items.filter(function(item){
							if(item.sku.stock <= item.sku.lowStock){
								return item
							}
						});
						that.setData({
							cartTotal: res.data.cartTotal
						});
					}else if(res.errno == 0 && !res.data.cartItems){
						that.cartItems =[];
						that.littleItems = [];
						that.cartTotal.checkedAmount = 0;
					}
					
					that.setData({
						checkedAllStatus: that.isCheckedAll()
					});
					that.cartclass = that.getCheckedCount();
				});
				
			},
			choiceAttr:function(e){
				let productid = e.currentTarget.dataset.productid;
				console.log(productid);
				let choice = {'productid':productid, 'choice':true}
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + choice.productid +'&choiceattr='+choice.choice,
					// event :{
					// 	onChoice: function(e){
					// 		console.log(e)
					// 	}
					// },
					// fail(res){
					// 	console.log(res)
					// }
				})
			},
			// showLogin: function() {
			// 	console.log("==show login==");
			// 	this.setData({
			// 		showLoginDialog: true
			// 	});
			// },
			onLigonSuccess: function() {
				console.log("==onLigonSuccess==");
				this.getCartList();
			} // onWechatLogin(e) {
			//   // console.log("==onWechatLogin=="+JSON.stringify(e))
			//   if (e.detail.errMsg !== 'getUserInfo:ok') {
			//     if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
			//       return false
			//     }
			//     wx.showToast({
			//       title: '微信登录失败',
			//     })
			//     return false
			//   }
			//   wx.showLoading({
			//     title: '登陆中...',
			//   });
			//   util.loginByWeixin().then((res) => {
			//     wx.hideLoading();
			//     // 设置用户信息
			//     if(res.errno == 0){
			//       this.setData({
			//         userInfo: app.userInfo,
			//         showLoginDialog: false
			//       });
			//       this.getCartList();
			//     }
			//   });
			// },

		}
	};
</script>
<style>
	page {
		height: 100%;
		min-height: 100%;
		background: #f1f1f1;
	}
	.lineitems{
		margin-top: 30rpx;
	}
	.lineitems .title2{
		margin-bottom:10rpx;
		display: flex;
		justify-content: space-between;
	}
	.lineitems .title2 .txt{
		display: flex;
		font-size: 24rpx;
		color:#888888;
	}
	.lineitems .title2 .txt .m{
		color: #B28550;
		font-size: 24rpx;
	}
	.lineitems .goods{
		border-radius: 16rpx;
		height: auto;
		width:690rpx;
	}
	.lineitems .darkimg{
		width: 156rpx;
		text-align:center;
		position: absolute;
		bottom: 20rpx;
		background-color: #353535;
		opacity: 0.8;
		color: #fff;
		font-size:24rpx;
		height: 38rpx;
		line-height: 38rpx;
		border-bottom-left-radius: 12rpx;
		border-bottom-right-radius: 12rpx;
	}
	.container {
		background: #f1f1f1;
		width: 100%;
		height: auto;
		min-height: 100%;
		overflow: hidden;
	}

	.service-policy {
		width: 750rpx;
		height: 86rpx;
		padding: 0 31.25rpx;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		background: #f1f1f1;
		z-index: 1000;
	}

	.service-policy .l {
		font-size: 24rpx;
		color: #888888;
	}

	.service-policy .txt.r {
		font-size: 28rpx;
		color: #353535;
	}

	.service-policy .r {
		font-size: 28rpx;
		color: #353535;
	}

	.service-policy .item {
		background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
		background-size: 10rpx;
		padding-left: 15rpx;
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #666;
	}

	.no-cart {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.no-cart .c {
		width: 100%;
		height: auto;
		margin-top: 200rpx;
	}

	.no-cart .c image {
		margin: 0 auto;
		display: block;
		text-align: center;
		width: 258rpx;
		height: 258rpx;
	}

	.no-cart .c text {
		margin: 0 auto;
		display: block;
		width: 258rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: center;
		font-size: 29rpx;
		color: #999;
	}


	.cart-view {
		width: auto;
		height: auto;
		overflow: hidden;
		margin: 86rpx 30rpx 20rpx 30rpx;
		/* box-shadow: 2rpx 1rpx 9rpx 0rpx rgba(0, 0, 0, 0.04); */
	}

	.cart-view .list {
		height: auto;
		width: 100%;
		overflow: hidden;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		/* margin-bottom: 120rpx; */
	}
   .cart-view .lowstock{
	height: auto;
	width: 100%;
	overflow: hidden;
	/* margin-bottom: 20rpx; */
	background: #fff;
	border-radius: 16rpx;
    }
	.cart-view .group-item {
		height: auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		/* margin: 10rpx 0; */
	}

	.cart-view .title {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		margin: 0rpx 0rpx 0rpx 0rpx;
		border-bottom: 1px solid #f4f4f4;
	}

	.cart-view .title .checkbox {
		float: left;
		height: 80rpx;
		width: 70rpx;
		padding: 25rpx 20rpx ;
	}


	.cart-view .title .txt {
		font-size: 28rpx;
		color: #353535;
	}

	.cart-view .title .m {
		font-size: 24rpx;
		color: #b28850;
		text-align: right;
		margin: 0 20rpx;
		flex: 1;
	}

	.cart-view .title .img {
		margin-left: 16rpx;
		width: 16rpx;
		height: 28rpx;
	}

	.cart-view .goods {
		padding: 10rpx 0;
		background:#fff;
	}

	.cart-view .item {
		/* width: 100vw; */
		display: flex;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		z-index: 999;
		background: #fff;
		height: 196rpx;
	}

	.cart-view .item movable-area {
		height: 196rpx;
		width: 522rpx;
		position:relative;
	}

	.cart-view .item movable-view {
		height: 196rpx;
		width: 690rpx;
		z-index: 99;
		background: #fff;
		position:relative;
	}

	.cart-view .item movable-view .l {
		/* width: 100vw; */
		width: calc(100vw-248rpx);
		height: 196rpx;
		display: flex;
		position: relative;
		box-sizing: border-box;
	}

	.cart-view .item .doing {
		position: absolute;
		top: 2rpx;
		bottom: 0;
		right: 2rpx;
		/* width: 168rpx; */
		/* margin-left: 20rpx; */
		/* margin-top: 15rpx; */
		font-size: 24rpx;
		display: flex;
		align-items:center;
		z-index: 1;
	}

	.cart-view .item .l .checkbox {
		height: 172rpx;
		width: 68rpx;
		padding: 82rpx 20rpx 62rpx 20rpx;
	}

	.cart-view .item .l .cart-goods {
		height: 196rpx;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx 0;
	}

	.cart-view .item .l .img {
		height: 156rpx;
		width: 156rpx;
		background: #f4f4f4;
		margin: 19.5rpx 18rpx 19.5rpx 0;
		border-radius: 12rpx;
	}

	.cart-view .item .l .info {
		height: 156rpx;
		width: 444rpx;
		position: relative;
		/* margin: 19.5rpx 26rpx 19.5rpx 0; */
	}

	.cart-view .item .l .t {
		font-size: 25rpx;
		overflow: hidden;
	}


	.cart-view .item .l .name {
		/* height: 30rpx; */
		max-width: 100%;
		font-size: 28rpx;
		color: #353535;
		float: left;
		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.cart-view .item .l .num {
		height: 28rpx;
		line-height: 28rpx;
		float: right;
	}

	.cart-view .item .l .attr {
		float: left;
		font-size: 22rpx;
		color: #666;
		overflow: hidden;
		background-color: #f1f1f1;
		padding: 5rpx 12rpx;
		border-radius: 4rpx;
		margin-top: 12rpx;
	}

	.cart-view .item .l .attr .attr-text {
		color: #888888;
		font-size: 24rpx;
		margin-right: 12rpx;
	}

	.cart-view .item .l .attr .attr-img {
		height: 12rpx;
		width: 22rpx;
		color: #666;
	}

	.cart-view .item .l .b {
		float: left;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.cart-view .item .l .price {
		float: left;
		color: #d73d2e;
		font-size: 28rpx;
		flex: 1;
	}

	.cart-view .item .l .open {
		height: 28rpx;
		width: 150rpx;
		display: block;
		float: right;
		background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/arrowDown-d48093db25.png) right center no-repeat;
		background-size: 25rpx;
		font-size: 25rpx;
		color: #333;
	}

	.cart-view .item .doing .similar {
		height: 192rpx;
		width: 84rpx;
		background: #daba80;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.cart-view .item .doing .collect {
		height: 192rpx;
		width: 84rpx;
		background: #c5a569;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.cart-view .item .doing .collect text {
		color: #fff;
	}

	.cart-view .item .doing .delete {
		height: 192rpx;
		width: 84rpx;
		background: #b28850;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	/* .cart-view .item.edit .t{
    display: none;
} */

	/* .cart-view .item.edit .attr{
    text-align: right;
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow-right1-e9828c5b35.png) right center no-repeat;
    padding-right: 25rpx;
    background-size: 12rpx 20rpx;
    margin-bottom: 24rpx;
    height: 39rpx;
    line-height: 39rpx;
    font-size: 24rpx;
    color: #999;
    overflow: hidden;
}

.cart-view .item.edit .b{
    display: flex;
    height: 52rpx;
    overflow: hidden;
}

.cart-view .item.edit .price{
    line-height: 52rpx;
    height: 52rpx;
    flex: 1;
} */

	.cart-view .item .selnum {
		/* display: none; */
		width: 156rpx;
		height: 48rpx;
		border: 2rpx solid #e5e4e5;
		display: flex;
		float: right;
		background-color: #ffffff;
		border-radius: 0rpx 4rpx 4rpx 0rpx;
		margin-right: 20rpx;
	}

	.cart-view .item .choice{
		border-radius:20rpx;
		text-align:center;
		height:40rpx;
		line-height:40rpx;
		width:96rpx;
		border:2rpx solid #b28850;
		color:#b28850;
		margin-right: 20rpx;
	}
	.selnum .cut {
		width: 48rpx;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
	}

	.selnum .cut.noChange {
		width: 48rpx;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
		color: #888888;
		background-color: #f1f1f1;
	}

	.selnum .number {
		flex: 1;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		float: left;
	}

	.selnum .add {
		width: 48rpx;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
	}


	.cart-view .group-item .header {
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		padding: 0 26rpx;
		border-bottom: 1px solid #f4f4f4;
	}

	.cart-view .promotion .icon {
		display: inline-block;
		height: 24rpx;
		width: 15rpx;
	}

	.cart-view .promotion {
		margin-top: 25.5rpx;
		float: left;
		height: 43rpx;
		width: 480rpx;
		/*margin-right: 84rpx;*/
		line-height: 43rpx;
		font-size: 0;
	}

	.cart-view .promotion .tag {
		border: 1px solid #f48f18;
		height: 37rpx;
		line-height: 31rpx;
		padding: 0 9rpx;
		margin-right: 10rpx;
		color: #f48f18;
		font-size: 24.5rpx;
	}

	.cart-view .promotion .txt {
		height: 43rpx;
		line-height: 43rpx;
		padding-right: 10rpx;
		color: #333;
		font-size: 29rpx;
		overflow: hidden;
	}

	.cart-view .get {
		margin-top: 18rpx;
		float: right;
		height: 58rpx;
		padding-left: 14rpx;
		border-left: 1px solid #d9d9d9;
		line-height: 58rpx;
		font-size: 29rpx;
		color: #333;
	}

	.cart-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 90rpx;
		width: 100%;
		background: #ffffff;
		display: flex;
		border: 1rpx solid #e5e5e5;
		z-index: 999;
	}

	.cart-bottom .checkbox {
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		font-size: 24rpx;
		flex: 1;
		display:flex;
	}


	.cart-bottom .total {
		height: 34rpx;
		margin: 28rpx 30rpx;
		font-size: 24rpx;
		text-align: right;
		display: flex;
		flex-direction: row;
	}

	.cart-bottom .total-move {
		height: 56rpx;
		width: 170rpx;
		line-height: 56rpx;
		margin-top: 17rpx;
		font-size: 24rpx;
		text-align: center;
		border-radius: 28rpx;
		border: 2rpx solid #e5e4e5;
	}

	.cart-bottom .total .l {
		color: #333333;
		font-size: 24rpx;
	}

	.cart-bottom .total .r {
		color: #d73d2e;
		font-size: 24rpx;
	}

	.cart-bottom .checkout {
		height: 90rpx;
		width: 150rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		background: #b28850;
		color: #ffffff;
	}

	.cart-bottom .checkout-delete {
		height: 56rpx;
		width: 140rpx;
		margin: 17rpx 30rpx 17rpx 20rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
		background: #ffffff;
		color: #b28850;
		border-radius: 28rpx;
		border: 2rpx solid #b28850;
	}

	/* .dialog-login{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5); 
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .dialog-login .dialog-body{
    width: 540rpx;
    height: auto;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    padding: 40rpx;
  }
  
  .dialog-login .dialog-body .title{
    width: 100%;
    text-align: center;
    line-height: 60rpx;
  }
  
  .dialog-login .dialog-body .content{
    width: 100%;
  }
  
  .dialog-login .dialog-body button{
    margin-top: 30rpx;
  } */
</style>
